// 新增簿记页面
import React from 'react';
import { connect } from 'dva';
import { FirstHeaderC, NoDataMaskC } from '../../../../comps';
import { Spin } from 'antd';
import mystyle from './index.less';
import accounting from 'accounting';

class AssetsInfoC extends React.Component {
  state = {
    masking: true, // 是否显示蒙版
    info: {}, // 资产信息
    assetTypeList: [],
    planPropertyList: [],
    zjUseHyList: [],
  };

  componentDidMount() {
    this.getInfo(this.props);
    const {
      globalM: {
        dataDictionary: { BAXXX_ZCLB = [], BAXX_ZGJHSX = [] },
      },
    } = this.props;
    this.setState({
      assetTypeList: BAXXX_ZCLB || [],
      planPropertyList: BAXX_ZGJHSX || [],
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingId } = this.props;
    if (tradingId != nextProps.tradingId) {
      if (nextProps.tradingId) {
        this.setState(
          {
            info: {},
          },
          () => {
            this.getInfo(nextProps);
          },
        );
      } else {
        this.setState({
          info: {},
        });
      }
    }
  }

  // 获取数据
  getInfo = (obj) => {
    const { dispatch } = this.props;
    const { tradingId } = obj;

    if (!tradingId) return;
    dispatch({
      type: 'assetsOrderM/queryAssetsInfo',
      payload: {
        id: tradingId,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            info: data,
          });
          this.props.onChange({
            startDate: data?.planCreateDate,
            endDate: data?.planEndDate,
          });
        } else {
          this.setState({
            info: {},
          });
          this.props.onChange({
            startDate: undefined,
            endDate: undefined,
          });
        }
      },
    });
  };

  // 格式化数据
  formatData = (value, unit, number) => {
    if (value == undefined || value == null) {
      return '--';
    } else {
      return accounting.formatNumber(value, number) + unit;
    }
  };

  render() {
    const { loading } = this.props;
    const { info, assetTypeList, planPropertyList, zjUseHyList } = this.state;

    const list = [
      {
        title: '证券代码',
        value: info.tradingcode || '--',
      },
      {
        title: '证券全称',
        value: info.tradingname || '--',
      },
      {
        title: '资产类别',
        value: info.assetType ? assetTypeList?.filter((i) => i.code == info.assetType)[0]?.value : '--',
      },
      {
        title: '管理人名称',
        value: info.manager || '--',
      },
      {
        title: '发行规模',
        value: this.formatData(info.price, '元', 2),
      },
      {
        title: '资产属性',
        value: info.planProperty ? planPropertyList?.filter((i) => i.code == info.planProperty)[0]?.value : '--',
      },
      {
        title: '成立日',
        value: info.planCreateDate || '--',
      },
      {
        title: '到期日',
        value: info.planEndDate || '--',
      },
      {
        title: '初始份额面值',
        value: this.formatData(info.parTotalValue, '元', 4),
      },
    ];
    return (
      <div>
        <FirstHeaderC title={'基础信息'} />
        <Spin spinning={loading.effects['assetsOrderM/queryAssetsInfo'] == true}>
          <div className={mystyle.wrapper}>
            <div className={mystyle.content}>
              {list.map((item, index) => {
                return (
                  <div className={mystyle.itemRow} key={index}>
                    <div>{item.title}</div>
                    <div title={item.value}>{item.value}</div>
                  </div>
                );
              })}
            </div>
            {!Object.keys(info).length ? <NoDataMaskC height={'100%'} title={'请选择证券代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ assetsOrderM, loading, globalM }) => ({ assetsOrderM, loading, globalM }))(AssetsInfoC);
